<html>
<head>
<meta charset="utf-8" />
<title>AJAX Users</title>
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<link rel="stylesheet" media="all" href="css/less_4_lh_1.4.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->

    <!-- JQuery, JQuery UI theme and style -->
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="scripts/jquery/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery/jquery-ui-1.8.14.custom.min.js"></script>

    <script type="text/javascript">
	$(document).ready(function() {
        $.getJSON("UsersAjax.action",
            function(data) {
                var items = [];
                $.each(data, function(key, val) {
                    items.push('<li id="' + key + '">' + val.firstName + ' ' + val.lastName + '</li>');
                });
                $('#ajaxUsers').replaceWith($('<ul/>', {
                    'class' : 'my-new-list',
                    html : items.join('')
                }));
            }
        );
    });
</script>
</head>

<body lang="en">
	<p>Ajax Users</p>
	<div id="ajaxUsers"><img src="images/ajax-loader.gif" alt="loading..." title="loading..."/></div>
</body>

</html>